<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->

<div id="test"></div>

<!--引入库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>


<script type="text/babel">



    //1.创建组件
    class Weather extends React.Component {

        state={
            isHot: true,
            wind:'微风'
        };

        render() {
            console.log("render");
            const {isHot,wind} = this.state;
            return (
                <div>
                    <h1 id='title1'>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    <h1 id='title2' style={{color:'red'}}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    <h1 id='title3' onClick={demo} style={{color:'blue'}}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    <h1 id='title4' onClick={this.changeWeather} style={{color:'green'}}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
                </div>
            );
        }


        //箭头函数没有自己的this 他找其外层的this当做自己this
        //自定义方法都必须用 赋值语句+箭头函数
        changeWeather = ()=> {
            console.log("箭头函数的this:");
            console.log(this);
            const  isHot = this.state.isHot;
            this.setState({isHot:!isHot});
        }


    }


    ReactDOM.render(<Weather/>, document.getElementById('test'));







    const title1 = document.getElementById("title1");
    title1.addEventListener('click',()=>{
        console.log("标题1被点击了");
    });


    const title2 = document.getElementById("title2");
    title2.onclick=function () {
        console.log("标题2被点击了");
    };

    function demo() {
        console.log("标题3被点击了");
    }



</script>

</body>
</html>
